<template>
    <div>
        <h1 style="text-align: center">进度填报</h1>
        <div class="topbox">
            <h3 style="margin-left: 20px">基本信息</h3>
            <el-form :model="fillprogress" inline label-position="top" label-width="200px"   >
                <el-form-item label="日期:"  class="item">
                    <el-input v-model="fillprogress.fill_date" type="date"></el-input>
                </el-form-item>
                <el-form-item label="填报编号"  class="item">
                    <el-input v-model="fillprogress.id" readonly placeholder="添加后自动生成"></el-input>
                </el-form-item>
                <el-form-item label="填报名称"  class="item"	>
                    <el-input v-model="fillprogress.fill_subject"></el-input>
                </el-form-item>
                <el-form-item label="项目名称"  class="item">
                    <el-input v-model="fillprogress.type_name" @focus="CheckProjectName"></el-input>
                </el-form-item>
                <el-form-item label="填报人" class="item">
                    <el-input v-model="fillprogress.editerId"></el-input>
                </el-form-item>
                <el-form-item label="附件" class="item">
                    <el-upload
                            name="multipartfile"
                            action="http://localhost/upload"
                            :headers="{token:this.$store.state.token}"
                            :data="{folder:'fillprogress'}"
                            class="upload-demo"
                            ref="upload"
                            :limit="1"
                            :multiple="false"
                            :auto-upload="false"
                            :on-success="handleUploadSuccess">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                    </el-upload>
                </el-form-item >
            </el-form>
            <el-dialog :visible.sync="projectTableVisible">
                <project-info-list v-on:row="row" v-if="projectTableVisible"></project-info-list>
            </el-dialog>
        </div>
        <div style="margin-top: 50px">
            <el-button @click="add">新增</el-button>
            <el-button @click="onsubmit">提交计划</el-button>
            <el-button @click="del">删除一行</el-button>
            <el-form >
                <el-table :data="ProgressDetails">
                    <el-table-column >
                        <template slot="header">
                            <p>进度填报ID<span style="color: red; font-size: 16px">*</span></p>
                        </template>
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input
                                        v-model="scope.row.id" :placeholder="fillprogress.id" readonly
                                ></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot="header">
                            <p>工程量清单<span style="color: red; font-size: 16px">*</span></p>
                        </template>
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input v-model="scope.row.list_subject"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot="header">
                            <p>单位<span style="color: red; font-size: 16px">*</span></p>
                        </template>
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input v-model="scope.row.unit"></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot="header">
                            <p>工程量<span style="color: red; font-size: 16px">*</span></p>
                        </template>
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input
                                        v-model.number="scope.row.tasks_count"
                                        type="number"
                                ></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column>
                        <template slot="header">
                            <p>
                                综合单价
                            </p>
                        </template>
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input
                                        v-model.number="scope.row.general_price"
                                        type="number"
                                ></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column >
                        <template slot="header">
                            <p>
                                合计
                            </p>
                        </template>
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input
                                        v-model.number="scope.row.sum_amount"
                                        type="number"
                                ></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column >
                        <template slot="header">
                            <p>
                                完工量
                            </p>
                        </template>
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input
                                        v-model.number="scope.row.finish_task_count"
                                        type="number"
                                        @blur="heji(scope.row)"
                                ></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                    <el-table-column >
                        <template slot="header">
                            <p>
                                小计
                            </p>
                        </template>
                        <template slot-scope="scope">
                            <el-form-item>
                                <el-input
                                        v-model.number="scope.row.total_price"
                                        type="number"
                                        readonly

                                ></el-input>
                            </el-form-item>
                        </template>
                    </el-table-column>
                </el-table>

            </el-form>
        </div>
        <div style="margin-top: 20px">
            <el-form inline>
                <el-form-item>
                    <span>合计</span>
                    <el-input v-model.number="total_amount"  readonly></el-input>
                </el-form-item>
                <el-form-item>
                    <span>金额大写</span>
                    <p>{{smallToBig(total_amount)}} </p>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import ProjectInfoList from '../common/projectInfo/ProjectInfoList.vue';
    import {FillProgressService} from '../../model/ww/FillProgressService.js'
    const fillProgressService=FillProgressService.getInstance()

    export default {
        name: "FillProgress",
        data(){
            return {
                fillprogress:{} , //进度填报对象
                projectTableVisible:false, //弹出框状态
                ProgressDetails:[], //进度明细
                total_amount:'', //合计
                total_upper:'',  //合计大写
                hjdx:[] //计算合计
            }
        },
        methods:{
            CheckProjectName(){
                this.projectTableVisible = true;
            },
            row(row){
                this.projectTableVisible=false
                this.fillprogress.type_name=row.projectName
                this.fillprogress.p_id=row.id

            },
            handleUploadSuccess(response){
                console.log(response)
                this.fillprogress.attachIds = response.data;
            },
            submitUpload(){
                this.$refs.upload.submit();
            },
            add() {
                this.ProgressDetails.push({
                    id:'',  //id
                    fillout_id:'', //编号
                    list_subject:'', //清单子目
                    unit:'',//单位
                    tasks_count:'',//工程量
                    general_price:'',//综合单价
                    sum_amount:'',//合计
                    finish_task_count:'',//完工量
                    total_price:'',//小计
                });
            },
            del(index) {
                this.ProgressDetails.splice(index, 1);
            },

            onsubmit(){
                //提交计划
                this.fillprogress.totalAmount=this.total_amount
                this.fillprogress.totalUpper=this.total_upper
                fillProgressService.save(this.fillprogress).then((response)=>{
                    console.log(response)
                })

                this.ProgressDetails.forEach(item=>{
                    item.fillout_id=this.fillprogress.id
                })

                //提交子目清单
                fillProgressService.saveBeach(this.ProgressDetails)


                this.$message("添加成功")
            },
            smallToBig(money) {
                //  将数字金额转换为大写金额
                var cnNums = new Array(
                    "零",
                    "壹",
                    "贰",
                    "叁",
                    "肆",
                    "伍",
                    "陆",
                    "柒",
                    "捌",
                    "玖"
                ); //汉字的数字
                var cnIntRadice = new Array("", "拾", "佰", "仟"); //基本单位
                var cnIntUnits = new Array("", "万", "亿", "兆"); //对应整数部分扩展单位
                var cnDecUnits = new Array("角", "分", "毫", "厘"); //对应小数部分单位
                var cnInteger = "整"; //整数金额时后面跟的字符
                var cnIntLast = "元"; //整数完以后的单位
                //最大处理的数字
                var maxNum = 999999999999999.9999;
                var integerNum; //金额整数部分
                var decimalNum; //金额小数部分
                //输出的中文金额字符串
                var chineseStr = "";
                // var parts; //分离金额后用的数组，预定义
                if (money == "") {
                    return "";
                }

                money = parseFloat(money);
                if (money >= maxNum) {
                    //超出最大处理数字
                    return "超出最大处理数字";
                }
                if (money == 0) {
                    chineseStr = cnNums[0] + cnIntLast + cnInteger;
                    return chineseStr;
                }

                //四舍五入保留两位小数,转换为字符串
                money = Math.round(money * 100).toString();
                integerNum = money.substr(0, money.length - 2);
                decimalNum = money.substr(money.length - 2);

                //获取整型部分转换
                if (parseInt(integerNum, 10) > 0) {
                    var zeroCount = 0;
                    var IntLen = integerNum.length;
                    for (var i = 0; i < IntLen; i++) {
                        var n = integerNum.substr(i, 1);
                        var p = IntLen - i - 1;
                        var q = p / 4;
                        var m = p % 4;
                        if (n == "0") {
                            zeroCount++;
                        } else {
                            if (zeroCount > 0) {
                                chineseStr += cnNums[0];
                            }
                            //归零
                            zeroCount = 0;
                            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
                        }
                        if (m == 0 && zeroCount < 4) {
                            chineseStr += cnIntUnits[q];
                        }
                    }
                    chineseStr += cnIntLast;
                }
                //小数部分
                if (decimalNum != "") {
                    var decLen = decimalNum.length;
                    for (var j = 0; j < decLen; j++) {
                        var h = decimalNum.substr(j, 1);
                        if (h != "0") {
                            chineseStr += cnNums[Number(h)] + cnDecUnits[j];
                        }
                    }
                }
                if (chineseStr == "") {
                    chineseStr += cnNums[0] + cnIntLast + cnInteger;
                } else if (decimalNum == "" || /^0*$/.test(decimalNum)) {
                    chineseStr += cnInteger;
                }
                this.total_upper=chineseStr;
                return this.total_upper
            },
            heji(row){//计算合计
                row.total_price=row.sum_amount*row.finish_task_count
                this.countsum(row.total_price)
            },
            countsum(sum_amout){  //计算总额
                this.hjdx.push(sum_amout)
                var a=0;
                this.hjdx.forEach(i=>{
                    a+=i
                })

                this.total_amount=a
            }
        }
        ,
        components:{
            ProjectInfoList
        },
        created(){
            this.fillprogress.editerId=sessionStorage.getItem("realName")
            var time=new Date();
            var date=(time.getMonth()+1)+"-"+time.getDate()+"-"+time.getHours()+"-"+time.getSeconds()
            this.fillprogress.id=(date.replaceAll("-","")-0)
        }
    }
</script>

<style scoped>
    .topbox{
        width: 1500px;
        margin-top: 20px;
    }
    .item{
        width: 300px;
        margin-left: 50px;
        margin-top: 20px;
    }
</style>